<template>
  <el-card class="addIntention-container">
    <el-form
      ref="addIntention"
      :model="customerInformation"
      :rules="customerInformationRules"
      auto-complete="on"
      label-position="left"
    >
      <el-form-item prop="comName">
        <span>公司名称</span>
        <el-input
          placeholder="请输入公司名称"
          v-model="customerInformation.comName"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="comBoss">
        <span>公司老板</span>
        <el-input
          placeholder="请输入公司老板姓名"
          v-model="customerInformation.comBoss"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="comMobile">
        <span>联系方式</span>
        <el-input
          placeholder="请输入手机号或微信号"
          v-model="customerInformation.comMobile"
          maxlength="11"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="comProjects">
        <div>意向业务</div>
        <!-- <el-input
              placeholder="请输入意向业务"
              v-model="customerInformation.comProjects"
              clearable
            ></el-input> -->
        <el-select
          v-model="customerInformation.comProjects"
          multiple
          filterable
          placeholder="请选择意向业务"
        >
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button
         type="primary"
         style="width:100%; margin-bottom: 25px"
         @click.native.prevent="addSelfCustomer"
         >添加客户
      </el-button>
      <el-button
         type="primary"
         style="width: 100%; margin-bottom: 25px"
         @click="$router.push('/import?type=uploading')"
         >批量导入
      </el-button>
    </el-form>
  </el-card>
</template>

<script>
import { addSelfCustomerApi, getAllSelectValuesApi } from '@/api/company'
export default {
  name: 'addIntention-page',
  created () {
    this.getAllSelectValues()
  },
  data () {
    return {
      customerInformation: {
        comName: '',
        comBoss: '',
        comMobile: '',
        comProjects: []
      },
      options: [],
      customerInformationRules: {
        comName: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
          }
        ],
        comBoss: [
          { required: true, message: '请输入公司老板姓名', trigger: 'blur' }
        ],
        comMobile: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: 'blur'
          }
        ],
        comProjects: [
          { required: true, message: '请输入意向业务', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取全部意向业务列表下拉框
    async getAllSelectValues () {
      const { data: res } = await getAllSelectValuesApi()
      // console.log('获取全部意向业务列表下拉框', res)
      this.options = [...res.data.data]
    },
    // 添加个人意向客户
    addSelfCustomer () {
      this.$refs.addIntention.validate(async valid => {
        // 表单验证没通过则返回
        if (!valid) return
        const { data: res } = await addSelfCustomerApi(this.customerInformation)
        // console.log('添加个人意向客户', res)
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '添加个人意向客户成功!',
            type: 'success',
            duration: 1500
          })
          // 清空表单
          this.customerInformation.comName = ''
          this.customerInformation.comBoss = ''
          this.customerInformation.comMobile = ''
          this.customerInformation.comProjects = ''
          // 添加意向客户后 跳转到 我的意向客户
          this.$router.push('/mycustomer/intention')
        }
      })
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.addIntention-container {
  box-sizing: border-box;
  height: 837px;
  padding: 100px 450px;
  .el-form {
    margin-top: 70px;
    .el-form-item {
      .el-select {
        width: 100%;
      }
    }
  }
  .el-button+.el-button{
    margin-left: 0;
  }
}
</style>
